<template>
  <div>
    <el-row>
      <el-col :md="{span: 24}" :lg="{span: 11, offset: 0}">
        <el-card class="char-card">
          <h3 @click="fastClick" style="cursor: pointer">报销单申请</h3>
        </el-card>
        <el-card class="char-card">
          <div id="charTest" class="main-chart" :style="{}"></div>
        </el-card>
      </el-col>
      <el-col :md="{span: 24}"
              v-loading="table.loading"
              element-loading-text="拼命加载中"
              :element-loading-lock="true"
              :lg="{span: 11, offset: 1}">
        <div class="main-list">
          <el-card class="list-card" v-if="table.data.length > 0" v-for="o in table.data" :key="o.id">
            <p>类型 ：
              <el-tag>{{o.showType}}</el-tag>
              <el-button @click="examine(o)"
                         size="mini"
                         v-if="o.type != 1 && o.type != 2"
                         round
                         type="primary"
                         style="float: right">审核
              </el-button>
              <el-button @click="examine2(o)"
                         size="mini"
                         v-else
                         round
                         type="primary"
                         style="float: right">审核
              </el-button>
            </p>
            <p>名称 ：{{o.nameAndCode }}</p>
            <p>报销人：{{o.proposer }}</p>
          </el-card>
          <el-card class="list-card" v-if="table.data.length === 0">
            <p style="text-align: center">暂无数据</p>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <reject @success="rejectSuccess" ref="reject"></reject>
    <s-dialog :dialog="dialogUpload">
      <p slot="title">申请审核报销单</p>
      <s-form :form="formDialogUpload" ref="formDialogUpload">
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}" class="">
            <el-form-item prop="nextAuditorId" label="审核人">
              <el-select v-model="formDialogUpload.nextAuditorId"
                         filterable
                         placeholder="请选择">
                <el-option
                  v-for="item in dialogUpload.userId"
                  :key="item.id"
                  :label="item.name + '   ' + item.orgName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogUploadSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialog" :closeTip="false" :close="dialogInit">
      <div>
        <s-form :form="formDialog" ref="formDialog">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="line-height: 36px; font-size: 20px">{{dialog.card.title}}</span>
              <span class="process">报销编号：{{formDialog.reimbursementCode}}</span>
              <span class="process">当前流程： </span>
              <el-select v-model="formDialog.workflowconfigId"
                         disabled
                         class="process_select"
                         placeholder="请选择">
                <el-option
                  v-for="item in dialog.process.data"
                  :key="item.value"
                  :label="item.processName + '   ' +  item.departmentName"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}">
                <el-form-item prop="reimbursementDate" :label="dialog.card.title !== '结算单' ? '报销日期' : '结算日期'">
                  <el-date-picker
                    v-model="formDialog.reimbursementDate"
                    disabled
                    format="yyyy年 MM月 dd日"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :lg="{span: 11, offset: 1}" v-if="dialog.card.title !== '暂借款借支单'">
                <el-form-item prop="reimbursementCode" label="报销部门">
                  <div class="s-content">
                    <el-tag type="success">{{formDialog.departmentName}}</el-tag>
                    <el-button type="primary" style="float: right"
                               v-if="dialog.card.title === '差旅费用报销单' && dialog.type !== 1"
                               @click.prevent="addTravelUser">添加出差人员
                    </el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="dialog.card.title === '差旅费用报销单'">
              <el-row
                :key="index"
                v-for="(item, index) in formDialog.travel">
                <el-col :xs="24" :lg="{span: dialog.type === 1 ? 11 : 9, offset: 0}">
                  <el-form-item
                    :prop="'travel.' + index + '.user'"
                    :label="'出差人员 ' + (index + 1)"
                    :rules="{required: true, message: '出差人员不能为空', trigger: 'blur'}">
                    <el-input
                      type="text"
                      v-model="item.user"
                      placeholder="出差人员"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: dialog.type === 1 ? 11 : 9, offset: 1}">
                  <el-form-item :prop="'travel.' + index + '.level'"
                                :label="'职位等级 ' + (index + 1)"
                                :rules="{required: true, message: '职位等级不能为空', trigger: 'blur'}">
                    <el-input
                      type="text"
                      v-model="item.level"
                      :placeholder="`出差人员 ${(index + 1)} 的职位等级`"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 3, offset: 1}" v-if="dialog.type !== 1">
                  <el-form-item label="可用操作">
                    <div class="s-content">
                      <el-button
                        size="mini"
                        icon="el-icon-delete"
                        round
                        type="danger"
                        @click.prevent="removeTravelUser(item)">删除
                      </el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :lg="{span: 11, offset: 0}">
                  <el-form-item prop="attributionDate" label="归属期间">
                    <el-date-picker
                      v-model="formDialog.attributionDate"
                      type="month"
                      placeholder="归属周期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 11, offset: 1}">
                  <el-form-item prop="travelReason" label="出差事由">
                    <el-input
                      type="text"
                      v-model="formDialog.travelReason"
                      placeholder="出差事由"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="dialog.card.title === '暂借款借支单'">
              <el-row>
                <el-col :xs="24" :lg="{span: 11, offset: 0}">
                  <el-form-item prop="borrower" label="借款人 ">
                    <div class="s-content">
                      {{dialog.row.proposer}}
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 11, offset: 1}">
                  <el-form-item label="所属部门">
                    <div class="s-content">{{dialog.row.departmentName}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :lg="{span: 11, offset: 0}">
                  <el-form-item prop="loanProject" label="借款项目  ">
                    <el-input
                      type="text"
                      v-model="formDialog.loanProject"
                      placeholder="借款项目  "></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 11, offset: 1}">
                  <el-form-item prop="loanMoney" label="借款金额 ">
                    <el-input
                      type="text"
                      v-model="formDialog.loanMoney"
                      placeholder="借款金额 "></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :lg="{span: 11, offset: 0}">
                  <el-form-item prop="repaymentDate" label="还款时间  ">
                    <el-date-picker
                      v-model="formDialog.repaymentDate"
                      type="date"
                      :editable="false"
                      placeholder="还款时间"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 11, offset: 1}">
                  <el-form-item prop="loanMoneyCap" label="借款金额(大写) ">
                    <div class="s-content">
                      {{formDialog.loanMoneyCap}}
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-collapse :value="['1', '2', '3', '4']" class="__rbApply">
              <el-collapse-item :title="dialog.card.title === '结算单' ? '结算明细 (提示： 按住 shift  使用 鼠标滑轮 控制横向滚动页面)' : '报销明细'" name="1"
                                v-if="dialog.card.title !== '暂借款借支单'">
                <expense :init="dialog.details" :search="dialog.type === 1" v-if="dialog.card.title === '成本费用报销单'"
                         ref="details" @change="handleDetailsChange"></expense>
                <travel :init="dialog.details" :search="dialog.type === 1" v-if="dialog.card.title === '差旅费用报销单'"
                        ref="details" @change="handleDetailsChange2"></travel>
                <rewardDeduction :init="dialog.details" :search="dialog.type === 1"
                                 v-if="dialog.card.title === '奖励扣款报销单'" ref="details"
                                 @change="handleDetailsChange3"></rewardDeduction>
                <adviceSettlement :init="dialog.details" :search="dialog.type === 1" v-if="dialog.card.title === '结算单'"
                                  ref="details" @change="handleDetailsChange4"></adviceSettlement>
              </el-collapse-item>
              <el-row class="other" v-if="dialog.card.title !== '暂借款借支单' && dialog.card.title !== '结算单'">
                <el-col :xs="24" :lg="{span: 4, offset: 0}" v-if="dialog.card.title === '成本费用报销单'">
                  <el-form-item prop="isWithholding" label="是否预提">
                    <el-switch
                      v-model="formDialog.isWithholding"
                      :disabled="dialog.type === 1"
                      active-text="是"
                      :active-value="2"
                      :inactive-value="1"
                      inactive-text="否"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 4, offset: dialog.card.title === '成本费用报销单' ? 1 : 0}">
                  <el-form-item label="报销金额合计">
                    {{SplitK(formDialog.money)}}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 8, offset: 1}">
                  <el-form-item pr label="核实金额（大写）">
                    {{formDialog.moneyCap}}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 4, offset: 1}" v-if="formDialog.borrowingMoney !== -1">
                  <el-form-item label="借款金额合计">
                    {{SplitK(formDialog.borrowingMoney)}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="other" v-if="dialog.card.title === '结算单'">
                <el-col :xs="24" :lg="{span: 4, offset: 0}">
                  <el-form-item label="报销金额合计">
                    {{SplitK(formDialog.money)}}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 8, offset: 1}">
                  <el-form-item label="核实金额（大写）">
                    {{formDialog.moneyCap}}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 4, offset: 1}">
                  <el-form-item label="油卡金额">
                    {{SplitK(formDialog.moneyYouKa)}}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 4, offset: 1}">
                  <el-form-item label="现金金额">
                    {{SplitK(formDialog.moneyXianJin)}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-collapse-item title="收款方" name="4"
                                v-if="dialog.card.title === '差旅费用报销单' || dialog.card.title === '暂借款借支单'">
                <payee ref="payee" :search="dialog.type === 1" :card="dialog.card" :init="dialog.payee"
                       :travel="dialog.card.title === '差旅费用报销单'"></payee>
              </el-collapse-item>
              <el-collapse-item title="附件列表" name="2">
                <el-upload
                  :disabled="dialog.type === 1"
                  :action="action"
                  :multiple="true"
                  name="reimbursement_image"
                  list-type="picture-card"
                  :file-list="dialog.fileVoList"
                  ref="upload"
                  :before-upload="dialogUploadBefore"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <p>附件数量： {{$refs.upload ? $refs.upload.uploadFiles.length : 0}}</p>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </s-form>
      </div>
      <el-button slot="footer" type="danger" v-if="dialog.row2.nodeType === 1" @click="rejectOpen(dialog.row)">直接驳回
      </el-button>
      <el-button slot="footer" type="primary" @click="dialogSave(1)">确认审核</el-button>
    </s-dialog>
    <v-viewer :options="viewer.option" :images="viewer.images"
              @inited="viewerInit" ref="viewer">
      <template scope="scope">
        <ul id="viewer">
          <li v-for="image in scope.images" :key="image">
            <img :src="image"/>
          </li>
        </ul>
      </template>
    </v-viewer>
  </div>
</template>
<script>
  import {AutoVue, AutoPromise, SplitK, IsImage, DownFile} from '~/plugins/Tools';
  import Config from '~/config';
  import Expense from '~/components/reimbursement/expense.vue';
  import Travel from '~/components/reimbursement/travel.vue';
  import Department from '~/components/reimbursement/department.vue';
  import Payee from '~/components/reimbursement/payee.vue';
  import RewardDeduction from '~/components/reimbursement/rewardDeduction.vue';
  import AdviceSettlement from '~/components/reimbursement/adviceSettlement.vue';
  import Nzh from 'nzh';

  let {
    PublicImageServer,
  } = Config;

  function __cards () {
    return [
      {
        title: '成本费用报销单',
        code: 'expenseCost',
        body: 'test',
        img: 'apple',
      },
      {
        title: '差旅费用报销单',
        code: 'travelExpense',
        body: 'test',
        img: 'apple',
      },
      {
        title: '暂借款借支单',
        code: 'borrowing',
        body: 'test',
        img: 'apple',
      },
      {
        title: '结算单',
        code: 'adviceSettlement',
        body: 'test',
        img: 'apple',
      },
      {
        title: '奖励扣款报销单',
        code: 'rewardDeduction',
        body: 'test',
        img: 'apple',
      },
    ];
  }

  function __formDialog () {
    return {
      reimbursementDate: {value: new Date(), rule: ['vNull'], type: 'Date'},
      departmentId: {value: '', rule: ['vNull']},
      departmentName: {value: '', rule: []},
      reimbursementCode: {value: '', rule: ['vNull']},
      money: {value: 0, rule: ['vNull', 'vNumber']},
      moneyYouKa: { value: '', rule: [] },
      moneyXianJin: { value: '', rule: [] },
      moneyCap: {value: Nzh.cn.toMoney(0), rule: ['vNull']},
      borrowingMoney: {value: 0, rule: ['vNull', 'vNumber']},
      enclosureNum: {value: 0, rule: ['vNumber']},
      workflowconfigId: {value: '', rule: ['vNull']},
      isWithholding: {value: 1, rule: ['vNull']},
      fileVoList: {value: '', rule: []},

      ...__formDialog_travel(),
      ...__formDialog_borrowing(),
    };
  }

  function __formDialog_travel () {
    return {
      travel: {
        value: [
          {
            user: '',
            level: '',
          },
        ],
        rule: [],
      },
      travelUsers: {value: '', rule: ['vNull']},
      positionLeave: {value: '', rule: ['vNull']},
      attributionDate: {value: '', rule: ['vNull__change'], type: 'Date'},
      travelReason: {value: '', rule: ['vNull']},
    };
  }

  function __formDialog_borrowing () {
    return {
      departmentId: {value: '', rule: ['vNull']},
      borrower: {value: '', rule: ['vNull__change']},
      loanMoney: {value: '', rule: ['vNull', 'vNumber']},
      loanProject: {value: '', rule: ['vNull']},
      loanMoneyCap: {value: '', rule: []},
      repaymentDate: {value: '', rule: [], type: 'Date'},
    };
  }

  function __formDialogUpload () {
    return {
      nextAuditorId: {value: '', rule: ['vNull'], cRemarks: ''},
      id: {value: '', rule: [], cRemarks: ''},
    };
  }

  const Type = {
    '员工': '1',
    '供应': '2',
    '成本': 'expenseCost',
    '差旅': 'travelExpense',
    '暂借': 'borrowing',
    '奖扣': 'rewardDeduction',
    '结算': 'adviceSettlement',
    '全部': '',
  };
  export default AutoVue({
    data: {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now() + 15 * 24 * 60 * 60 * 1000 || time.getTime() < Date.now();
        },
      },
      dialog: {
        title: '新增',
        fullscreen: true,
        width: '100%',
        card: {},
        reimbursementUser: [],
        borrower: [],
        process: {
          data: [],
          option: {
            active: '',
            default: true,
          },
        },

        row: {},
        row2: {},
        type: 0,
        id: '',

        details: [],
        payee: [],
        department: [],
        fileVoList: [],
      },
      formDialog: __formDialog(),
      dialogUpload: {
        userId: [],
      },
      cards: __cards(),
      dialogImage: {
        url: false,
        fullscreen: true,
        formRef: false,
        width: '100%',
      },
      viewer: {
        option: {
          zIndex: 100000,
        },
        el: {},
        images: [],
      },
      formDialogUpload: __formDialogUpload(),

      myChart: {},
      table: {
        column: [
          {
            label: '审核状态',
            prop: 'myState',
            minWidth: '0px',
          },
        ],
        url: '/pageHome/searchByPage',
      },
    },
    methods: {
      SplitK,
      async dialogUploadOpen (row) {
        row.id = this.dialog.id;
        if (row.end) {
          this.$confirm('您将审批报销单。', '确认审批？', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }).then(async () => {
            await this.post('/reimbursement/examine/', {
              id: row.id,
            });
            this.dialog.dialogInit.call(this);
            this.chartUpdate();
          });
        } else {
          this.formDialogUpload.id = row.id;
          let {contentList} = await this.get('/workflowConfig/selectAuditors/' + this.formDialogUpload.id);
          this.dialogUpload.userId = contentList;
          this.dialogUpload.visible = true;
        }
      },
      dialogUploadSave () {
        this.VALIDATE('formDialogUpload', async option => {
          option.id = this.formDialogUpload.id;
          try {
            await await this.post('/reimbursement/examine/', option);
            this.dialogUpload.dialogInit.call(this);
            this.dialog.dialogInit.call(this);
            this.chartUpdate();
          } catch (err) {
            console.error(err);
          }
        });
      },

      tableDelete (row) {
        this.$confirm('您将删除此报销单。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          await this.get('/reimbursement/blankOut/' + row.id);
          this.chartUpdate();
        });
      },
      viewerInit (viewer) {
        this.viewer.el = viewer;
      },
      viewerShow () {
        this.$viewer.show();
      },
      download () {
        this.$alert('现在没有接口！', '提示');
      },

      async handleRemove (file) {
        try {
          await this.p(this.action + '/' + file.response.filename, {
            method: 'delete',
            headers: {
              sLoading: true,
            },
          });
        } catch (err) {
          console.error(err);
        }
      },
      handleDetailsChange (data) {
        let money = 0;
        let borrowingMoney = 0;
        data.forEach(item => {
          money += item.money || 0;
          borrowingMoney += item.loanNum || 0;
        });
        this.formDialog.money = money;
        this.formDialog.moneyCap = Nzh.cn.toMoney(money);
        this.formDialog.borrowingMoney = borrowingMoney;
        return this.formDialog.money;
      },
      handleDetailsChange2 (data, type) {
        let money = 0;
        data.forEach(item => {
          money += parseFloat(item.trafficMoney) + parseFloat(item.travelMoney) + parseFloat(item.otherMoney);
        });
        this.formDialog.money = money;
        this.SET('TRAVEL_moneySum', money);
        this.formDialog.moneyCap = Nzh.cn.toMoney(money);
        this.formDialog.borrowingMoney = -1;
        return this.formDialog.money;
      },
      handleDetailsChange3 (data) {
        let money = 0;
        data.forEach(item => {
          money += parseFloat(item.money);
        });
        this.formDialog.money = money;
        this.SET('TRAVEL_moneySum', money);
        this.formDialog.moneyCap = Nzh.cn.toMoney(money);
        this.formDialog.borrowingMoney = -1;
        return this.formDialog.money;
      },
      handleDetailsChange4 (data) {
        let money = 0;
        let moneyYouKa = 0;
        let moneyXianJin = 0;
        data.forEach(item => {
          money += parseFloat(item.oilcardSettleAmout) + parseFloat(item.cashAmout);
          moneyYouKa += parseFloat(item.oilcardSettleAmout);
          moneyXianJin += parseFloat(item.cashAmout);
        });
        this.formDialog.money = money;
        this.formDialog.moneyYouKa = moneyYouKa;
        this.formDialog.moneyXianJin = moneyXianJin;
        this.SET('TRAVEL_moneySum', money);
        this.formDialog.moneyCap = Nzh.cn.toMoney(money);
        this.formDialog.borrowingMoney = -1;
        return this.formDialog.money;
      },
      async dialogBorrower (query) {
        let {contentList} = await this.post('/empolyee/searchByPage', {
          bxSetlecycleName: query,
          'pageNumber': 1,
          'pageSize': 20,
        });
        this.dialog.borrower = contentList;
      },
      dialogBorrowerChange (id) {
        this.dialog.borrower.forEach(item => {
          if (item.id === id) {
            this.formDialog.departmentId = item.bxSupplierDepartmentid;
            this.formDialog.departmentName = item.bxSupplierDepartmentname;
          }
        });
      },

      rejectOpen (row) {
        row.id = this.dialog.id;
        this.$refs.reject.open(row);
      },
      rejectSuccess (json) {
        this.dialogInit();
        this.tableWatch('table');
      },
      dialogInit (type) {
        switch (this.dialog.card.title) {
        case '成本费用报销单':
          this.$refs.details.tableClear('table');
          this.$refs.details.loanNum = {};
          break;
        case '差旅费用报销单':
          this.DEL('TRAVEL_money');
          this.$refs.details.sTable.data = [];
          this.$refs.payee.tableClear('table');
          break;
        case '暂借款借支单':
          this.DEL('TRAVEL_money');
          this.$refs.payee.tableClear('table');
          break;
        case '结算单':
          this.$refs.details.sTable.data = [];
          this.$refs.details.sTable.old = [];
          break;
        case '奖励扣款报销单':
          this.DEL('TRAVEL_money');
          this.$refs.details.tableClear('table');
          break;
        }
        this.$refs.upload.uploadFiles = [];
        this.dialog.dialogInit.call(this);
      },
      async dialogOpen (card, row, type) {
        this.dialog.type = type;
        this.dialog.visible = true;
        this.dialog.id = row.id;
        if (row.borrowingVoList) {
          row = {
            ...row,
            ...row.borrowingVoList,
          };
        }
        this.dialog.row = row;
        this.$nextTick(() => {
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__formDialog(), row),
          };
          this.formDialog.attributionDate = new Date(row.attributionDate);
          if (card.title === '差旅费用报销单') {
            let travelUsers = row.travelUsers.split(';');
            let positionLeave = row.positionLeave.split(';');
            let travel = [];
            travelUsers.forEach((item, index) => {
              travel.push({
                user: item,
                level: positionLeave[index],
              });
            });
            travel.pop();
            this.$set(this.formDialog, 'travel', travel);
          }
        });
        let autoPromise = [
          async () => {
            let {contentList} = await this.post('/workflowConfig/selectWorkflow', {
              'processType': card.code,
            });
            this.dialog.process.data = contentList;
            // this.formDialog.workflowconfigId = contentList[0] ? contentList[0].id : '';
          },
        ];
        let files = [];
        switch (card.title) {
        case '成本费用报销单':
          this.dialog.details = row.expenseCostFormDetailVoList;
          files = [];
          row.fileVoList.forEach(item => {
            files.push({
              name: item.fileUrl,
              url: PublicImageServer.src + '/image/reimbursement/' + item.fileUrl,
              response: {
                filename: item.fileUrl,
              },
              status: 'finished',
            });
          });
          this.dialog.fileVoList = files;
          break;
        case '差旅费用报销单':
          autoPromise.push(async () => {
            this.reimbursementUser(this.USER.user.name);
          });
          let {
            travelExpensesFormDetailVoList,
            payeeList,
            fileVoList,
          } = row;
          this.dialog.details = travelExpensesFormDetailVoList;
          this.dialog.payee = payeeList;
          files = [];
          fileVoList.forEach(item => {
            files.push({
              name: item.fileUrl,
              url: PublicImageServer.src + '/image/reimbursement/' + item.fileUrl,
              response: {
                filename: item.fileUrl,
              },
              status: 'finished',
            });
          });
          this.dialog.fileVoList = files;
          break;
        case '暂借款借支单':
          this.dialog.payee = row.payeeList;
          autoPromise.push(async () => {
            this.dialogBorrower(row.borrower);
          });
          files = [];
          row.fileVoList.forEach(item => {
            files.push({
              name: item.fileUrl,
              url: PublicImageServer.src + '/image/reimbursement/' + item.fileUrl,
              response: {
                filename: item.fileUrl,
              },
              status: 'finished',
            });
          });
          this.dialog.fileVoList = files;
          break;
        case '结算单':
          this.dialog.details = row.settlementInfoVoList;
          files = [];
          row.fileVoList.forEach(item => {
            files.push({
              name: item.fileUrl,
              url: PublicImageServer.src + '/image/reimbursement/' + item.fileUrl,
              response: {
                filename: item.fileUrl,
              },
              status: 'finished',
            });
          });
          this.dialog.fileVoList = files;
          break;
        case '奖励扣款报销单':
          this.dialog.details = row.rewardDeductionVoList;
          files = [];
          row.fileVoList.forEach(item => {
            files.push({
              name: item.fileUrl,
              url: PublicImageServer.src + '/image/reimbursement/' + item.fileUrl,
              response: {
                filename: item.fileUrl,
              },
              status: 'finished',
            });
          });
          this.dialog.fileVoList = files;
          break;
        }
        await AutoPromise(autoPromise);
        this.dialog.card = card;
      },
      async reimbursementUser (query = '') {
        let {contentList} = await this.post('/empolyee/searchByPage', {
          bxSetlecycleName: query,
          'pageNumber': 1,
          'pageSize': 20,
        });
        this.dialog.reimbursementUser = contentList;
      },
      handlePictureCardPreview (file) {
        if (IsImage(file.name)) {
          let images = [];
          let index = 0;
          let length = 0;
          this.$refs.upload.uploadFiles.forEach((item, i) => {
            if (IsImage(item.name)) {
              images.push(item.url);
              if (file.response.filename === item.response.filename) {
                index = length;
              }
              length++;
            }
          });
          this.viewer.images = images;
          setTimeout(() => {
            this.viewer.el.index = index;
            this.viewer.el.view(index);
            this.viewer.el.show();
          }, 250);
        } else {
          DownFile(this.server + file.response.filename, file.response.filename);
        }
      },
      dialogSave (flag) {
        this.dialogUploadOpen(this.dialog.row2);
      },
      dialogUploadBefore (file) {
        const isLt = file.size / 1024 / 1024 < 1;
        if (!isLt) {
          this.$message.error('上传附件大小不能大于 1MB!');
        }
        return isLt;
      },
      removeTravelUser (item) {
        if (this.formDialog.travel.length === 1) {
          return this.$alert('最少一位出差人员！', '提示');
        }
        let index = this.formDialog.travel.indexOf(item);
        if (index !== -1) {
          this.formDialog.travel.splice(index, 1);
        }
      },
      addTravelUser () {
        this.formDialog.travel.push({
          user: '',
          level: '',
        });
      },

      async dialogOpen2 (row, type) {
        this.dialog.row2 = row;
        let cards = __cards();
        let card = cards.find(item => {
          return item.code === row.type;
        });
        let json = await this.get('/reimbursement/getReimbursementById/' + row.id);
        if (card) {
          this.dialogOpen(card, json, type);
        } else {
          this.$alert('对应的 报销单类型 没有找到！', '提示');
        }
      },
      dialogSearchOpen (row) {
        this.$refs.process.open(row);
      },

      fastClick () {
        this.$router.push('/FEreimbursement/rbrecord/rbapply');
      },
      chartClick (params) {
        this.table.option.type = Type[params.name];
        this.chartUpdate();
      },
      async chartInit () {
        let chart = this.$echarts.init(this.$el.querySelector('#charTest'));
        // 绘制图表
        chart.setOption(await this.chartUpdateOption());
        chart.on('click', this.chartClick);
        this.myChart = chart;
      },
      async chartUpdateOption () {
        let step = await this.get('/pageHome');
        let data = [
          '员工',
          '供应',
          '成本',
          '差旅',
          '暂借',
          '奖扣',
          '结算',
          '全部',
        ];
        let dataX = [];
        let dataS = [];
        step.forEach((item, index) => {
          dataX.push(data[index]);
          dataS.push(item);
        });
        return {
          title: {text: '我的待审核'},
          tooltip: {},
          xAxis: {
            axisTick: {
              interval: 0,
            },
            data: dataX,
          },
          yAxis: {},
          series: [{
            name: '待审核',
            type: 'bar',
            data: dataS,
          }],
        };
      },
      async chartUpdate () {
        this.myChart.setOption(await this.chartUpdateOption());
        this.tableWatch('table');
      },
      examine (row) {
        if (isNaN(row.type)) {
          this.dialogOpen2(row, 1);
        }
      },
      examine2 (row) {
        if (parseInt(row.type) === 1) {
          this.$router.push('/FEreimbursement/resources/employee2');
        } else {
          this.$router.push('/FEreimbursement/resources/information2');
        }
      },
    },
    store: ['USER', 'TRAVEL_moneyUse', 'TRAVEL_moneyUse2', 'TRAVEL_moneySum'],
    components: {
      'expense': Expense,
      'travel': Travel,
      'department': Department,
      'payee': Payee,
      'rewardDeduction': RewardDeduction,
      'adviceSettlement': AdviceSettlement,
    },
    computed: {
      action: function () {
        return PublicImageServer.src + '/file/upload/image/reimbursement';
      },
      server: function () {
        return PublicImageServer.src + '/image/reimbursement/';
      },
    },
    beforeRouteLeave (to, from, next) {
      this.$destroy();
      next();
    },
    transition: 'slide-fade-bottom',
    mounted () {
      this.chartInit();
      this.tableWatch('table');
      console.log(this);
    },
  });
</script>
<style lang="scss">
  $cardMargin: 0 5% 5px;
  $cardMarginTop: 20px;

  .char-card {
    margin: $cardMargin;
    margin-top: $cardMarginTop;
    .main-chart {
      width: 100%;
      height: calc(100vh - 255px);
    }
    width: 90%;
  }

  .main-list {
    max-height: calc(100vh - 100px);
    overflow: scroll;
    margin-top: $cardMarginTop;
    .list-card {
      width: 90%;
      margin: $cardMargin;
      margin-top: $cardMarginTop;
      &:first-child {
        margin-top: 0;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .char-card {
      .main-chart {
        height: 400px;
      }
    }
    .main-list {
      max-height: none;
    }
  }
</style>

<style lang="scss">
  .process {
    margin-left: 15px;
  }

  .process_select {
    width: 400px!important;
    @media screen and (max-width: 800px) {
      width: auto!important;
    }
  }

  .process_download {
    margin-top: 10px;
    float: right;
  }

  .__rbApply {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-collapse-item__content {
      padding-bottom: 5px;
    }
  }
</style>
